<template>
<div class="map-box">
   <div class="map">
    <div class="lfet-icon" v-for="(item, index) in mapData" :key="index">
      <i class="iconfont" :class="item.icon" :style="{color:item.backcolor}"></i>
      <div class="box">
        <div class="shop">{{ item.shop }}</div>
        <div class="num">{{ item.num }}</div>
      </div>
    </div>

  </div>
</div>
 
</template>

<script>
export default {
  data() {
    return {
      mapData: [
        {
          icon:'icon-dingdan1',
          shop: "总订单",
          num: "102.400",
          backcolor:'blue'
        },
        {
           icon:'icon-qian',
          shop: "总销售额",
          num: "102.400",
          backcolor:'red'
        },
        {
           icon:'icon-dingdan',
          shop: "今日订单数",
          num: "102.400",
          backcolor:'blue'
        },
        {
          icon:'icon-zongjine',
          shop: "今日销售额",
          num: "102.400",
          backcolor:'greenyellow'
        }
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.map-box{
  width: 100%;
  height: 100%;
}
.map {
  display: flex;
  justify-content: space-between;
  margin: auto;
  width: 90%;
  height: 9rem;
  background: #eeee;
  .lfet-icon {
    display: flex;
    width: 15rem;
    height: 5rem;
    background: #fff;
    margin: 2rem 3rem;
  }
  .iconfont {
    font-size: 3rem;
    margin-left: 2rem;
    margin-top: 1rem;
  }
}
.box {
  margin-left: 2rem;
  margin-top: 1rem;
  .shop {
    color: #ccc;
    font-size: 1.1rem;
  }
  .num {
    font-weight: bold;
    font-size: 1rem;
    margin-left: .1rem;
  }
}

</style>